<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="WEB-INF/jsp/comm-header.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
<%     
	response.setHeader("P3P","CP=CAO PSA OUR");
%>  
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <c:set var="contextPath" value="${pageContext.request.contextPath}" scope="application" />
    <title>个人信息修改</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<link rel="shortcut icon" href="${contextPath}/favicon.ico" type="image/x-icon" />
    <link href="${contextPath}/resources/yhzx/css/bootstrap.css" rel="stylesheet">
    <link href="${contextPath}/resources/yhzx/css/login.css" rel="stylesheet">
    <link href="${contextPath}/resources/yhzx/css/forms.css" rel="stylesheet">
    <link href="${contextPath}/resources/yhzx/css/entypo-icon.css" rel="stylesheet">

    <script src="${contextPath}/resources/js/jquery.min.js"></script>
    <script src="${contextPath}/resources/js/json3.min.js"></script>
    <script src="${contextPath}/resources/js/bootstrap.min.js"></script>
    <script src="/UcConfig/uca/GlobalParams.js"></script>
    <script src="${contextPath}/resources/js/jquery-extention.js"></script>
    <script src="${contextPath}/resources/myjs/UCenterCommon.js"></script>
</head>

<body style="background-color:#f9f9fb">

    <div class="">
        <div class="">
            <ol class="breadcrumb lj">
                <li><a><i class="glyphicon glyphicon-home"></i></a></li>
                <li>个人信息修改</li>
            </ol>
        </div>
    </div>

    <div class="">
        <div class="main">

            <div class="panel panel-default panel1">
                <!--错误提示--->
                <div id="errorInfo" class="panel-body1"></div>
                <!--错误提示 end--->
                <div class="clear"></div>

                <!--pic--->
                <div id="headPortraitDiv" class="panel-body panel-body1">
                    <form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label" style="margin-top:30px;">&nbsp;&nbsp;&nbsp;头像</label>
                            <div class="col-sm-7 photo">
                                <span>编辑头像</span>
                                <a class="pf-edit-avatar"></a>
                                <img id="headPortrait" src="resources/yhzx/img/photo.png"  onclick="UCenterCommon.openUpload();">
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                    </form>
                </div>
                <!--pic end--->

                <div class="panel-body1">
                    <form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
                        <div id="usernameDiv" class="form-group">
                            <label class="col-sm-3 control-label" for="password-input" style="margin-top:5px;">&nbsp;&nbsp;&nbsp;用户名</label>
                            <div class="col-sm-7">
                                <input type="text" id="username" name="username" class="form-control input-m" placeholder="提示文字" readonly>
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                    </form>

                    <form action="" class="form-horizontal">
                        <div id="nicknameDiv" class="form-group">
                            <label class="col-sm-3 control-label" style="margin-top:5px;">&nbsp;&nbsp;&nbsp;昵称</label>
                            <div class="col-sm-7">
                                <input type="text" id="nickname" name="nickname" class="form-control input-m" placeholder="请输入昵称">
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                    </form>

                    <form action="" class="form-horizontal">
                        <div id="sexDiv" class="form-group">
                            <label class="col-sm-3 control-label">&nbsp;&nbsp;&nbsp;性别</label>
                            <div class="col-sm-7 sex">
								<label><input type="radio" name="sex" value="M" style="margin-left:0;"><span>男</span></label>
				           		<label><input type="radio" name="sex" value="F" style="margin-left:0;"><span>女</span></label>
				           		<label><input type="radio" name="sex" value="S" style="margin-left:0;"><span>保密</span></label>
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                    </form>

                    <form action="" class="form-horizontal">
                        <div id="emailDiv" class="form-group">
                            <label class="col-sm-3 control-label" style="margin-top:5px;">&nbsp;&nbsp;&nbsp;邮箱</label>
                            <div class="col-sm-7">
                                <input type="text" id="email" name="email" class="form-control input-m" placeholder="请输入邮箱地址">
                            	<div id="emailTip" class="text-error"></div>
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                    </form>
					<form action="" class="form-horizontal" style="position:relative;">
                    <div id="mobilePhoneDiv" class="form-group">
                        <label class="col-sm-3 control-label" style="margin-top:5px;">&nbsp;&nbsp;&nbsp;手机号</label>
                        <div class="col-sm-7">
                            <input type="text" id="mobilePhone" name="mobilePhone" class="form-control input-m" placeholder="请绑定手机号">
                        	<div id="mobilePhoneTip" class="text-error" style="color:red;"></div>
                        	
                        </div>
                        <div class="col-sm-2">
                        	<a id="rebound" style="line-height:42px;" data-toggle="modal" data-target="#myModal">解除绑定</a>
                        	<a id="bound" style="line-height:42px;" data-toggle="modal" data-target="#myModal">绑定</a>
                        </div>
                    </div>
                    </form>
                    
                    <div class="form-group">
                        <label class="col-sm-3 control-label">&nbsp;</label>
                        <div class="col-sm-9">
                         	<div class="btn-sure">
                        	    <button type="button" class="btn btn1" onclick="javascript:UCenterCommon.updateUserInfo();void(0);">确定</button>
                        	    <button type="button" class="btn btn1 btn-white" onclick="javascript:window.close();void(0);">关闭</button>
                        	</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content" style="position:relative;">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="glyphicon glyphicon-remove"></i></button>
			<form class="register-form" id="resetForm" style="text-align:center;margin-top:15px;">
                	<div id="popup-send" style="display:none;position:absolute;left:28%;top:50%;width:150px;height:30px;line-height:30px;background:rgba(0,0,0,.5);color:#fff;font-size:14px;font-family:'Microsoft YaHei';text-align:center;border-radius:3px;"></div>
                	<h3 class="modal-title" >手机绑定</h3><p></p>
            		<p>验证码将会发送至你的手机</p>
                    <div class="xdw-form"></div>      
					<div class="xdw-form">
       					<label class="form-text">手机号</label>
        				<input type="text" class="input col-sm-8" id="Phone" name="mobliePhone" maxlength="11">
					</div>

					<div class="xdw-form">
        				<label class="form-text">验证码</label>
        				<input type="text" class="input col-sm-6" id="code" name="code" maxlength="6">
        				<a class="yzm1" onclick="javascript:UCenterCommon.sendPhoneCode(this);void(0);">点击获取</a>
					</div>
					<div style="text-align:center;width:320px; color:red;padding-top:10px;"><span id="message"></span></div>
                    <br>
					<p id="bound-btn"><a class="btn btn-primary btn-login" onclick="javascript:UCenterCommon.boundPhone(this);void(0);">手机绑定</a></p>
					<p id="rebound-btn"><a class="btn btn-primary btn-login" onclick="javascript:UCenterCommon.reboundPhone(this);void(0);">解除绑定</a></p>
				</form>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
    
<script type="text/javascript">

	document.onkeydown = keyListener;
	function keyListener(e) {
		e = e ? e : event;
		if (e.keyCode == 13) {
			UCenterCommon.updateUserInfo();
		}
	}

    (function(){
    	UCenterCommon.getUserInfo();
    	
    	$("#bound").on("click",function(){
    		$("#myModal").find(".modal-title").html("手机绑定");
    		$("#bound-btn").show();
    		$("#rebound-btn").hide();
    		$("#Phone").val("");
    		$("#code").val("");
    		$("#message").html("");
    	});
    	
    	$("#rebound").on("click",function(){
    		$("#myModal").find(".modal-title").html("解除绑定");
    		$("#bound-btn").hide();
    		$("#rebound-btn").show();
    		$("#code").val("");
    		$("#message").html("");
    	});
    	
    })();
    
</script>
</body>
</html>
